<template>
  <div style="margin-top: 20px;margin-right: 20px;">
    <div class="nypcz">
      <div
        id="totalarea"
        style="width: 710px;height: 400px;padding-top: 40px;"
      ></div>
    </div>

    <div class="xsqk">
      <div style="display: flex;padding-top: 0px;">
        <div id="mapBox" style="width: 380px;height: 380px;"></div>
        <div style="padding-top: 30px;">
          <div class="bzt" id="bzt" style="width: 350px; height: 200px;"></div>
          <div class="bzt" id="city" style="width: 350px; height: 180px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import suzhou from "@/map/sz";

export default {
  data() {
    return {
      areaList: [{ cityName: suzhou, areaName: "苏州市" }],
    };
  },
  mounted() {
    this.initCharts();
    this.initChartsCity();
    this.initChartstotalarea();
    this.mapChart();
  },
  methods: {
    mapChart() {
      const item = this.areaList;
      const cityName = this.areaList[0].areaName;
      this.$echarts.registerMap(cityName, item[0].cityName);
      let myChart = this.$echarts.init(document.getElementById("mapBox"));
      myChart.setOption(
        {
          geo: [
            {
              show: true,
              map: cityName,
              zoom: 1.0,
              layoutCenter: ["50%", "50%"],
              layoutSize: "100%",
              label: {
                normal: {
                  //静态的时候展示样式
                  show: false, //是否显示地图省份得名称
                  textStyle: {
                    color: "#fff",
                    fontSize: 12,
                    fontFamily: "Arial",
                  },
                },
                emphasis: {
                  //动态展示的样式
                  color: "#fff",
                },
              },

              blur: {
                label: { show: true, color: "#000" },
              },
              roam: false, // 是否开启鼠标滚轮缩放
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    color: "#fff",
                  },
                  color: "#fff",
                  borderColor: "#32CBE0",
                  borderWidth: 1.5,
                  areaColor: {
                    type: "linear-gradient",
                    x: 0,
                    y: 1000,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0.5,
                        color: "#0D59C1", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#53C9C7", // 100% 处的颜色
                      },
                    ],
                    global: true, // 缺省为 false
                  },
                },
                emphasis: {
                  label: {
                    show: true,
                    color: "#fff",
                  },
                  borderWidth: 3,
                  borderColor: "rgba(255, 230, 175,0.8)",
                  shadowColor: "rgba(255, 230, 175,0.5)",
                  shadowBlur: 30,
                  textStyle: {
                    color: "#fff",
                    fontSize: 12,
                    backgroundColor: "transparent",
                  },
                  areaColor: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#1cfbfe",
                      },
                      {
                        offset: 1,
                        color: "#3348e7",
                      },
                    ],
                    false
                  ),
                },
              },
            },

            {
              type: "map",
              map: cityName,
              zlevel: -2,
              zoom: 1.0,
              layoutCenter: ["50%", "51.4%"],
              layoutSize: "100%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderColor: "rgba(35, 161, 184,0.5)",
                  shadowColor: "rgba(35, 161, 184,0.8)",
                  shadowOffsetY: 5,
                  shadowBlur: 15,
                  areaColor: "#257AB2",
                },
              },
            },
            {
              type: "map",
              map: cityName,
              zlevel: -3,
              zoom: 1.0,
              layoutCenter: ["50%", "52.4%"],
              layoutSize: "100%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderColor: "rgba(7, 65, 117,0.5)",
                  shadowColor: "rgba(7, 65, 117,0.8)",
                  shadowOffsetY: 15,
                  shadowBlur: 8,
                  areaColor: "#0A2763",
                },
              },
            },
            {
              map: cityName,
              zlevel: -1,
              zoom: 1.0,
              silent: true,
              layoutCenter: ["50%", "50%"],
              layoutSize: "100%",
              roam: false,
              itemStyle: {
                normal: {
                  borderColor: "rgba(192,245,249,.8)",
                  borderWidth: 3,
                  shadowColor: "#6FFDFF",
                  shadowOffsetY: 0,
                  shadowBlur: 10,
                  // areaColor: 'rgba(29,85,139,.6)',
                },
              },
              label: {
                normal: {
                  //静态的时候展示样式
                  show: true, //是否显示地图省份得名称
                  textStyle: {
                    color: "#fff",
                    fontSize: 12,
                    fontFamily: "Arial",
                  },
                },
                emphasis: {
                  //动态展示的样式
                  show: false,
                  color: "#fff",
                },
              },
            },
          ],
          series: [
            {
              name: "light",
              type: "effectScatter",
              coordinateSystem: "geo",
              data: [[120.67825600000003, 31.31438200000001]],
              symbolSize: 10,
              rippleEffect: {
                period: 3,
                brushType: "stroke",
                scale: 3,
              },
              symbolOffset: [0, 0],
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "#FEC87F",
                },
              },
            },
          ],
        },
        true
      );
    },
    initChartsCity() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById("city"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },

        yAxis: {
          type: "category",
          axisLabel: {
            color: "#2DFFFD",
            fontSize: 13, // 设置字体大小为 14px，可以根据需要调整
          },

          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: [
            {
              name: "江苏",
              value: 260,
            },
            {
              name: "上海",
              value: 220,
            },
            {
              name: "南京",
              value: 200,
            },
            {
              name: "无线",
              value: 160,
            },
          ].map((r) => r.name),
        },
        series: [
          {
            name: "",
            type: "bar",
            symbol: "path://M1 1,L140 1,L140 15,L1 15,Z",
            symbolKeepAspect: false,
            stack: "triangle",
            barWidth: 16,
            itemStyle: {
              borderWidth: 0,
              color: new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(0,190,192,0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(0,190,192, 1)",
                },
              ]),
            },
            label: {
              show: true,
              position: "right",
              color: "#E07037",
              fontSize: 18,
              fontWeight: "bold",
              formatter: "{c}%",
            },
            data: [
              {
                name: "江苏",
                value: 260,
              },
              {
                name: "上海",
                value: 220,
              },
              {
                name: "南京",
                value: 200,
              },
              {
                name: "无线",
                value: 160,
              },
            ],
          },
        ],
      });
    },
    initCharts() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById("bzt"));
      myChart.setOption({
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(9,40,84,0.8)",
          borderColor: "rgba(9,40,84,0.8)",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          formatter: function(params) {
            return (
              '<span style="margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background:linear-gradient( ' +
              params.color.colorStops[0].color +
              ", " +
              params.color.colorStops[1].color +
              ');"></span>' +
              params.name +
              "&nbsp;&nbsp;<span style='font-weight:bold'>" +
              params.value +
              "</span>"
            );
          },
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: "category",
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            show: false,
            interval: 0,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 20,
          },
        },
        radiusAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 10, 0],
            color: "#0B3E5E",
            fontSize: 20,
          },
        },
        calculable: true,
        series: [
          {
            type: "pie",
            radius: ["16%", "17%"],
            center: ["50%", "55%"],
            emphasis: {
              scale: false,
            },

            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  color: "#0189cc",
                },
                tooltip: {
                  show: false,
                },
              },
            ],
          },
          {
            type: "pie",
            radius: ["20%", "80%"],
            center: ["50%", "55%"],
            roseType: "area", // 展示南丁格尔图
            zlevel: 10,
            label: {
              show: true,
              formatter: function(param) {
                return (
                  "{a|" +
                  param.name +
                  "}" +
                  "{s|" +
                  " " +
                  param.percent +
                  "%}\n\n"
                );
              },
              padding: [-10, -50],
              height: 40,
              rich: {
                a: {
                  color: "#fff",
                  fontSize: "14",
                },
                s: {
                  color: "#00ffff",
                  fontSize: "14",
                },
              },
              position: "outside",
            },
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: true,
              },
            },
            itemStyle: {
              color: function(params) {
                const colorList = [
                  {
                    c1: " #45EAFF",
                    c2: "#40ADAC",
                  },
                  {
                    c1: "#12B3F8",
                    c2: "#7DE8FF",
                  },
                  {
                    c1: " #0176D3",
                    c2: "#13B7FF",
                  },
                  {
                    c1: "#015BD3",
                    c2: "#138DFF",
                  },
                ];
                return new that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: colorList[params.dataIndex].c1,
                  },
                  {
                    offset: 1,
                    color: colorList[params.dataIndex].c2,
                  },
                ]);
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 40,
              color: "#46d6ff",
              lineStyle: {
                type: "dashed",
                width: 2,
              },
            },

            data: [
              {
                value: 45,
                name: "正常",
              },
              {
                value: 32,
                name: "故障",
              },
              {
                value: 16,
                name: "报废",
              },
              {
                value: 7,
                name: "其他",
              },
            ],
          },
        ],
      });
    },
    initChartstotalarea() {
      var color = ["#FFAE5E", "#44F0FF"];
      let myChart = this.$echarts.init(document.getElementById("totalarea"));
      myChart.setOption({
        color: color,

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["实际产值", "计划产值"],
          bottom: "2%",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: "white",
              },
            },
            name: "万元",
            type: "value",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "实际产值",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "计划产值",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nypcz {
  width: 712px;
  height: 402px;
  background-image: url(".././../../assets/government/home/4.png");
}
.xsqk {
  width: 709px;
  height: 405px;
  background-image: url(".././../../assets/government/home/5.png");
  margin-top: 17px;
}
.mapItem {
  position: relative;
  width: 100%;
  height: 1080px;
}
</style>
